function assert(reg,msg) {
    if(!reg){
        throw new Error(msg || '校验失败')
    }
}

class douban {
    dom = '' // 被点击的元素
    oDiv = '' // 添加的元素
    clickEven = null
    constructor(dom) {
        if( typeof dom === 'string'){
            this.dom = document.querySelector(dom)
        }else if(dom instanceof HTMLElement){
            this.dom = dom
        }else{
            assert(dom,'请传入正确内容')
        }
        this.render()
        this.dom.addEventListener('click',(e)=>{
            console.log(e.clientX)
            console.log(e.clientY)
            // 给全局添加删除事件
            this.clickEven = this.docClick.bind(this)
            document.addEventListener('click',this.clickEven)

            document.querySelector('.live-tab').style.display = 'block'
            e.stopPropagation()
        })
    }
    docClick(e){
        this.remove()
        e.stopPropagation()
    }
    getIndex(node){
        const arr = document.querySelectorAll('.live-tab li')
        console.log(arr)
        return  Array.from(arr).findIndex(e=>{
            return e === node
        })
    }
    render(){
        const oDiv = document.createElement('div')
        oDiv.className = 'live-tab'
        oDiv.innerHTML = `<div>
              <div class="wave s">
                <div class="_2MUigC9rTs5TkYEURNVt2q">
                </div>
                <div class="JvceXUqvhLlL6h0qs-nzk">
                </div>
                <div class="_3DmB-mG2d4JJdAo4ugPaTU">
                </div>
                <div class="_3GgHqQVPiHBR5MylzyjNls">
                </div>
              </div>

              <div class="container">
                <ul class="column">
                  <li class="row aic active">
                    <img class="img"
                      src="https://img3.doubanio.com/f/fm/55cc7ebd1777d5101a82d7d6ce47ffc5e114131d/pics/fm/san_favicon.png"
                      alt="">
                    豆瓣精选 MHz
                  </li>
                  <li class="row aic">
                    <i class="iconfont icon-heart-fill active-h"></i>
                    我的红心歌曲
                  </li>
                  <li class="row aic">
                    <img class="img" src="https://img3.doubanio.com/icon/ul188738892-1.jpg" alt="">
                    我的私人 MHz
                  </li>
                </ul>
                <hr class="_24GcLdJnvrJ23aKnPCasbJ">
                <div class="row aic collect-link">
                  <p class="flex-1">我最近收藏的兆赫和歌单</p>

                  <svg class="icon icon-angle-right" width="18" height="18" viewBox="0 0 18 18" version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    style="transform: rotate(270deg); position: absolute; right: 28px; bottom: 20px;">
                    <defs></defs>
                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                      <path
                        d="M13.8074785,10.809253 C14.0641738,11.0815536 14.0641738,11.5228421 13.8074785,11.7958146 C13.5501613,12.0680618 13.1339704,12.0680618 12.8766432,11.7958146 L9.00000502,7.68466501 L5.12270484,11.7958146 C4.86599947,12.0680618 4.44920681,12.0680618 4.19249141,11.7958146 C3.9358362,11.5228421 3.9358362,11.0815536 4.19249141,10.809253 L8.53426641,6.20422541 C8.79158361,5.93192486 9.20776444,5.93192486 9.46510169,6.20422541 L13.8074785,10.809253 Z"
                        id="Shape" fill="#C6C6C6"
                        transform="translate(9.000000, 9.000000) scale(1, -1) translate(-9.000000, -9.000000)"></path>
                    </g>
                  </svg>
                </div>
              </div>

            </div>`
        this.dom.parentNode.insertBefore(oDiv,this.dom)
        this.oDiv = oDiv
        this.oDiv.style.display = 'none'
        // 切换音乐
        oDiv.addEventListener('click',this.switchMusic.bind(this))
    }
    switchMusic(e){
        if(this.getIndex(e.target) > -1){
            const arr = document.querySelectorAll('.live-tab li')
            for (let i = 0; i < arr.length; i++) {
                arr[i].className = 'row aic'
            }
            e.target.className = 'row aic active'
            document.querySelector('.live-tab .wave').style.top = this.topMap(this.getIndex(e.target))
            document.querySelector('.b-tab-title').innerText = e.target.innerText;
            this.oDiv.style.display = 'none'
        }

        e.stopPropagation()
    }
    topMap(idx){
        return {
            0:'-46px',
            1:'-16px',
            2:'14px'
        }[idx]
    }
    remove(){
        this.oDiv.style.display = 'none'
        // this.dom.parentNode.removeChild(this.oDiv)
        // 清除document上的事件
        document.removeEventListener('click',this.clickEven)
    }
}
